<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<script src="../node_modules/redux/dist/redux.min.js"></script>

<body>
    <div>
        <button id="de">-</button>
        <span id="show"></span>
        <button id="add">+</button>
    </div>
</body>
<script>
    const add = document.getElementById("add");
    const de = document.getElementById("de");
    const show = document.getElementById("show");
    const initState = {
        count: 1,
    };
    show.innerHTML = initState.count;
    const {
        createStore
    } = Redux;
    const reducer = (state = initState, action) => {
        switch (action.type) {
            case "ADD":
                return {
                    ...state,
                    count: (state.count += 1),
                };
            case 'DE':
                return {
                    ...state,
                    count: (state.count -= 1),
                }
        }
    };
    const store = createStore(reducer);
    add.addEventListener("click", () => {
        store.dispatch({
            type: "ADD",
        });
    });
    de.addEventListener('click', () => {
        store.dispatch({
            type: "DE",
        });
    })
    store.subscribe(() => {
        const newState = store.getState();
        show.innerHTML = newState.count;
    });
</script>

</html>